<template>
  <div style="margin:0;padding:0;box-sizing:border-box;height: 600px;overflow: scroll;">
    <!-- 搜索功能 -->
    <Search>
      <div slot="delete" v-if="searchResult.length != 0 ">
        <el-row class="searchResult">
          <el-col :md="18" :sm="20" :xs="22">
            <el-card :body-style="{ padding: '0px' }" shadow="hover"> 
              <div style="padding: 14px;">
                <el-row>
                  <el-col :sm="{span:6,offset:1}" :xs="{span:11,offset:1}">
                    <img :src="searchResult[0].imageUrl" class="image">
                  </el-col>

                  <el-col :sm="17" :xs="12">
                    <div class="nameAndButton">
                      <div class="roleName">{{searchResult[0].name}}</div>

                      <el-popconfirm
                        :title="searchResult[0].name + '的相关信息将被删除，是否确认？'"
                        icon="el-icon-info"
                        icon-color="#e6a23c"
                        @confirm="deleteARoleById(searchResult[0]._id)"
                      >
                        <el-button slot="reference" type="primary" >删除</el-button>
                      </el-popconfirm>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div> 
    </Search>

    <!-- 展示所有可以处理的角色 -->
    <el-row style="background-color:white">
      <el-col :sm="{span:11,offset:(index+2)%2==0 ? 0 : 1}" :xs="{span:18,offset:3}" v-for="(item,index) in allRoleList" :key="index" >
        <el-card :body-style="{ padding: '0px' }" shadow="hover">
          <div style="padding: 14px;">
            <el-row>
              <el-col :sm="{span:6,offset:1}" :xs="{span:11,offset:1}">
                <img :src="item.imageUrl" class="image">
              </el-col>

              <el-col :sm="17" :xs="12">
                <div class="nameAndButton">
                  <div class="roleName">{{item.name}}</div>

                  <el-popconfirm
                    :title="item.name + '的相关信息将被删除，是否确认？'"
                    icon="el-icon-info"
                    icon-color="#e6a23c"
                    @confirm="deleteARoleById(item._id)"
                  >
                    <el-button slot="reference" type="primary" >删除</el-button>
                  </el-popconfirm>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Search from "@/components/search"
import {mapState} from 'vuex'
export default {
  components:{Search},
  data(){
    return {
    }
  },
  computed:{
    ...mapState({
      allRoleList:(state)=> state.home.allRoleList,
      searchResult:(state)=>state.home.searchResult
    })
  },
  methods:{
    async deleteARoleById(id){
      let idObj = {}
      idObj._id = id
      try{
          await this.$store.dispatch("deleteARoleById",idObj)
          this.getAllRoles()
          this.$store.dispatch("getSelectedRoles")
      }catch(error){
          console.log(error);
      } 
    },
    getAllRoles(){
      this.$store.dispatch("getAllRoles")
    }
  },
  mounted(){
    this.getAllRoles()
  },
}
</script>

<style scoped lang="less">
.searchResult{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 180px;
  border: 2px solid #b59b90;
  border-radius: 5px;
  .el-card{
    margin-top:0
  }
}
.image {
  width: 90px;
  height: 90px;
  background-color: #fff;
  padding: 5px;
  border-radius: 50%;
  /* 阴影 */
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
.el-card{
  margin-top: 30px;
}
@media screen and (min-width:1301px) {
  .nameAndButton{
    display: flex;
    justify-content: space-around;
    align-items: center;
    .roleName{
      height: 90px;
      width: 100px;
      line-height: 90px;
      font-size:20px;
      font-weight: 500;
    }
  }
}
@media screen and (max-width:1300px) {
  .nameAndButton{
    display: flex;
    flex-direction: column;
    align-items: center;
    .roleName{
      height: 50x;
      width: 100px;
      line-height: 50px;
      font-size:20px;
      font-weight: 500;
      text-align: center;
    }
  }
}
</style>